<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

            <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


    <!-- Custom styles for this template -->
    <link href="https://v5.bootcss.com/docs/examples/sign-in/signin.css" rel="stylesheet">


    <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">

<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.1">

<title _msthash="149916" _msttexthash="11244558">布局 ·引导 v5.1</title>

<link rel="canonical" href="https://getbootstrap.com/docs/5.1/forms/layout/">



<!-- Bootstrap core CSS -->
<style class="anchorjs"></style><link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="/docs/5.1/assets/css/docs.css" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Layout">
<meta name="twitter:description" content="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/5.1/forms/layout/">
<meta property="og:title" content="Layout">
<meta property="og:description" content="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.">
<meta property="og:type" content="article">
<meta property="og:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">

<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-146052-10', 'getbootstrap.com');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
</script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>


  <script id="_carbonads_projs" type="text/javascript" src="https://srv.carbonads.net/ads/CKYIKKJL.json?segment=placement:getbootstrapcom&amp;callback=_carbonads_go"></script></head>
</head>




  <body class="text-center">
<div class="col-lg-6 col-md-8 mx-auto">
<main class="form-signin">
  <form>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-emoji-sunglasses-fill" viewBox="0 0 16 16">
      <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM2.31 5.243A1 1 0 0 1 3.28 4H6a1 1 0 0 1 1 1v.116A4.22 4.22 0 0 1 8 5c.35 0 .69.04 1 .116V5a1 1 0 0 1 1-1h2.72a1 1 0 0 1 .97 1.243l-.311 1.242A2 2 0 0 1 11.439 8H11a2 2 0 0 1-1.994-1.839A2.99 2.99 0 0 0 8 6c-.393 0-.74.064-1.006.161A2 2 0 0 1 5 8h-.438a2 2 0 0 1-1.94-1.515L2.31 5.243zM4.969 9.75A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .866-.5z"/>
    </svg>

    <h1 class="h3 mb-3 fw-normal">注册</h1>

  </form>



<div class="bd-example">
<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label" _msthash="1938820" _msttexthash="12122825">电子邮件</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label" _msthash="1939067" _msttexthash="5332938">密码</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>

<div class="col-md-6">
    <label for="inputCity" class="form-label" _msthash="1939808" _msttexthash="4548362">省份</label>
    <input type="text" class="form-control" id="inputCity">
    </div>
  <div class="col-md-6">
    <label for="inputState" class="form-label" _msthash="1940055" _msttexthash="2186730">城市</label>
    <input type="text" class="form-control" id="inputCity">
  </div>

<div class="col-12">
    <label for="inputAddress" class="form-label" _msthash="1939314" _msttexthash="4354064">地址</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234主街" _mstplaceholder="8331115">
</div>

  <div class="col-12">
    <label for="inputAddress2" class="form-label" _msthash="1939561" _msttexthash="4359914">地址 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="公寓、单间公寓或楼层" _mstplaceholder="36014810">
  </div>

  <div class="col-md-12">
    <label for="inputZip" class="form-label" _msthash="1940302" _msttexthash="5331729">电话号码</label>
    <input type="text" class="form-control" id="inputZip">
  </div>

  <div class="col-12">
    <p><a class="w-100 btn btn-lg btn-outline-primary" type="submit" href="/login">立即注册</a></p>
      <br>
      <a href="/login">已有账号？点击登录</a>
  </div>
        <p class="mt-5 mb-3 text-muted">&copy; 2021-2022 Python,莫慧敏</p>
</form>
</div>

</main>
</div>






</body>
</html>